<!-- MapShow.vue -->
<script setup>
import { onMounted, onUnmounted, ref, watch } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

/* ========= ① 接收门牌数组 ========= */
const props = defineProps({
    /* 父组件传进来的门牌列表，每个元素形如 { lng: 103.99, lat: 30.55 } */
    doorplates: {
        type: Array,
        default: () => []
    }
})

/* ========= ② 组件内状态 ========= */
const mapEl = ref(null)        // 地图 DOM 容器
let map = null                 // 地图实例
let markers = []               // 当前全部 Marker 实例

/* ========= ③ 初始化地图 ========= */
onMounted(async () => {
    const AMap = await AMapLoader.load({
        key: '6a15e02eb10d0e069c5e701681273282',
        version: '2.0'
    })

    map = new AMap.Map(mapEl.value, {
        viewMode: '2D',
        /* 给一个缺省中心，渲染完后会 setFitView 自动调整 */
        center: [103.993033, 30.552469],
        zoom: 14,
        /* 如果希望完全静态展示，还可加 dragEnable:false 等控制交互 */
        // dragEnable: false
    })

    renderMarkers() // 首次渲染

    /* ========= ④ 监听数组变化，实时刷新标记 ========= */
    watch(
        () => props.doorplates,
        () => renderMarkers(),
        { deep: true }
    )
})

/* ========= ⑤ 封装渲染函数 ========= */
function renderMarkers() {
    if (!map) return

    // 1) 清空旧标记
    markers.forEach(m => map.remove(m))
    markers = []

    // 2) 生成新标记
    props.doorplates.forEach(({ lng, lat, seq }) => {
        const marker = new AMap.Marker({
            position: [lng, lat],
            anchor: 'bottom-center',
            // —— 序号小圆点 —— //
            label: {
                // 用内联样式简单美化，也可以写 class
                content: `<div style="
                    color:#fff;
                    font-size:12px;
                    ">${seq}</div>`,
                direction: 'top-center',   // 序号显示在标记上方
                offset: [0, 16]
            },
            map
        })
        markers.push(marker)
    })

    // 3) 让地图自动适配视野（包含全部标记）
    if (markers.length) {
        map.setFitView(markers) // 自动计算 bounds + zoom
    }
}

/* ========= ⑥ 组件卸载，释放资源 ========= */
onUnmounted(() => {
    markers.forEach(m => map?.remove(m))
    map?.destroy()
    map = null
    markers = []
})
</script>

<template>
    <!-- 容器必须有宽高；父组件可用 style / class 控制 -->
    <div ref="mapEl" style="width: 100%; height: 100%"></div>
</template>

<style scoped>
:deep(.amap-marker-label) {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
</style>